<script>
import {getPicCodeApi, getSmsCodeApi, loginApi} from '@/api/login'
// 防抖函数
import debounce from 'lodash.debounce'

export default {
  name: "Login",
  onLoad(options) {
    // 如果传递的参数是 undefined，那会变成字符串 ‘undefined’，传递的是 false 会变成 ’false‘
    // options 拿到的参数只会是字符串，就算 url 传递的是 undefined，在这边拿到的也只会是 ‘undefined’
    // 解码，decodeURIComponent(undefined) 的结果是 ‘undefined’，不得不防啊
    if (options.toUrl) this.toUrl = decodeURIComponent(options.toUrl)
    // 传递过来的 true 会自动变成 ‘true’ 字符串，只能改成默认传递空值，如果不是空值，就代表是 tabBar 页面
    this.isTabBar = options.isTabBar
    this.getPicCode()
  },
  data() {
    return {
      picUrl: '',
      picCode: '',
      picKey: '',
      totalSecond: 60, // 总秒数
      currentSecond: 60, // 当前秒数
      timerId: null,
      mobile: null,
      smsCode: null,
      // 其他页面携带的跳转参数，登录成功要跳转回原来页面
      toUrl: '',
      isTabBar: '', // 空值代表不是 tabBar 页面
    }
  },
  methods: {
    async getPicCode() {
      const {data} = await getPicCodeApi()
      this.picUrl = data.base64
      this.picKey = data.key
      uni.showToast({icon: "none", title: '获取图形验证码成功'})
    },
    async getSmsCode() {
      // 验证手机号和图形验证码格式
      if (!this.validate()) return

      // 只有定时器（id）不存在，才能开启定时器
      if (this.timerId) return

      // 验证码发送成功才去开定时器，验证码发送不成功，要用户等60秒，这是不对的，而且请求验证码的前提是定时器没有打开
      await getSmsCodeApi(this.picCode, this.picKey, this.mobile)
      uni.showToast({icon: "none", title: '验证码发送成功，请注意查收'})

      // 立即减少一秒并更新视图
      this.currentSecond--

      this.timerId = setInterval(() => {
        this.currentSecond--
        if (this.currentSecond <= 0) {
          clearInterval(this.timerId)
          this.timerId = null
          this.currentSecond = this.totalSecond
        }
      }, 1000)

    },
    validate() {
      // 匹配手机号
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        uni.showToast({icon: "none", title: '请输入正确的手机号'})
        return false
      }

      // 匹配图形验证码
      if (!/^[A-Za-z0-9]{4}$/.test(this.picCode)) {
        uni.showToast({icon: "none", title: '请输入正确的图形验证码'})
        return false
      }

      return true
    },
    login: debounce(async function () {
      // 验证手机号和图形验证码格式
      if (!this.validate()) return

      if (!/^\d{6}$/.test(this.smsCode)) return uni.showToast({icon: "none", title: '请输入正确的短信验证码'})

      const res = await loginApi(this.smsCode, this.mobile)

      // 往本地存储存入token和userId
      this.$store.commit('user/SET_USER_INFO', res.data)

      uni.showToast({icon: "success", title: '登录成功'})

      setTimeout(() => {
        if (this.toUrl) {
          if (this.isTabBar) {
            uni.switchTab({url: this.toUrl})
          } else {
            uni.redirectTo({url: this.toUrl})
          }
        }
        // 尝试返回上一页
        else if (getCurrentPages().length > 1) {
          uni.navigateBack()
        } else {
          // 没有上一页时跳转到首页（兜底逻辑）
          uni.switchTab({url: '/pages/index/index'})
        }
      }, 1000)

    }, 500),
  },
  destroyed() {
    // 登录组件销毁的时候删除定时器
    clearInterval(this.timerId)
  }
}
</script>

<template>
  <div class="login">

    <van-nav-bar title="会员登录" left-arrow @click-left="uni.navigateBack"/>

    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <text>未注册的手机号登录后将自动注册</text>
      </div>

      <div class="form">
        <div class="form-item">
          <input v-model="mobile" class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
        </div>
        <div class="form-item">
          <input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
          <image v-show="picUrl" @click="getPicCode" :src="picUrl" alt=""/>
        </div>
        <div class="form-item">
          <input v-model="smsCode" class="inp" placeholder="请输入短信验证码" type="text">
          <button @click="getSmsCode">
            {{ timerId === null ? '获取验证码' : currentSecond + '秒后重新发送' }}
          </button>
        </div>
      </div>

      <div @click="login" class="login-btn">登录</div>
    </div>

  </div>
</template>

<style lang="less">
.container {
  padding: 49px 29px;

  .title {
    margin-bottom: 20px;

    h3 {
      font-size: 26px;
      font-weight: normal;
    }

    text {
      line-height: 40px;
      font-size: 14px;
      color: #b8b8b8;
    }
  }

  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;

    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
    }

    image {
      width: 94px;
      height: 31px;
    }

    button {
      height: 31px;
      border: none;
      font-size: 13px;
      color: #cea26a;
      background-color: transparent;
      padding-right: 9px;
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 39px;
    background: linear-gradient(90deg, #ecb53c, #ff9211);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
